<!--
 * @Author: ChaiHongJun
 * @Date: 2021-04-06 18:04:52
 * @LastEditors: ChaiHongJun
 * @LastEditTime: 2021-05-01 15:27:49
 * @version:
 * @Description:    MV栏目
-->
<template>
  <div class="mv-wrap container">
    <div class="filter">
      <ul class="tag-lang">
        <li
          v-for="(item, index) of area"
          :key="index"
          :class="{ active: chosenArea == item.value }"
          @click="selectCategory('area', item.value)"
        >
          {{ item.value }}
        </li>
      </ul>
      <ul class="tag-lang tag-type">
        <li
          v-for="(item, index) of type"
          :key="index"
          :class="{ active: chosenType == item.value }"
          @click="selectCategory('type', item.value)"
        >
          {{ item.value }}
        </li>
      </ul>
      <ul class="tag-lang">
        <li
          v-for="(item, index) of order"
          :key="index"
          :class="{ active: chosenOrder == item.value }"
          @click="selectCategory('order', item.value)"
        >
          {{ item.value }}
        </li>
      </ul>
    </div>
    <loadingMore :mvs="getMvList" @loadMore="handleLoadMore"></loadingMore>
    <loading v-if="loading"></loading>
  </div>
</template>
<script>
import loadingMore from "@/components/mv/loadingMore/Index.vue";
import Loading from "@/components/common/loading/Index";
// import { getMvCategory } from "@/request/api.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      loading: false, //是否显示加载动画
      limit: 12, // 默认一次加载30个MV
      area: [
        { value: "全部" },
        { value: "内地" },
        { value: "港台" },
        { value: "欧美" },
        { value: "日本" },
        { value: "韩国" },
      ],
      type: [
        { value: "全部" },
        { value: "官方版" },
        { value: "原生" },
        { value: "现场版" },
        { value: "网易出品" },
      ],
      order: [{ value: "上升最快" }, { value: "最热" }, { value: "最新" }],
      currentPage: 1, //当前页
      chosenArea: "全部",
      chosenType: "全部",
      chosenOrder: "上升最快",
    };
  },
  computed: {
    ...mapGetters(["getMvList"]),
    offset() {
      return (this.currentPage - 1) * this.limit;
    },
  },
  components: {
    Loading,
    loadingMore,
  },
  mounted() {
    //  初始化 加载MV
    this.loading = true;
    this.$store
      .dispatch("getMVList", {
        limit: this.limit,
        offset: this.offset,
        area: this.area[0].value,
        type: this.type[0].value,
        order: this.order[0].value,
      })
      .then(() => {
        this.loading = false;
      });
  },
  methods: {
    selectCategory(cat, value) {
      if (cat == "area") {
        //区域选择
        this.chosenArea = value;
      }
      if (cat == "type") {
        // MV版本
        this.chosenType = value;
      }
      if (cat == "order") {
        //排序规则
        this.chosenOrder = value;
      }
      this.currentPage = 1;
      // this.showMvCategory();

      //先清空之前的MV列表
      this.$store.commit("REMOVE_MV_LIST", []);
      // 再异步请求MV List
      this.$store.dispatch("getMVList", {
        limit: this.limit,
        offset: this.offset,
        area: this.chosenArea,
        type: this.chosenType,
        order: this.chosenOrder,
      });

      // console.log(this.getMvList);
    },
    // "加载更多"  处理函数
    handleLoadMore() {
      // setTimeout(() => {
      //   // this.showMvCategory();
      // }, 2000);
      this.loading = true;
      this.currentPage = this.currentPage + 1;
      this.$store.dispatch("getMVList", {
        limit: this.limit,
        offset: this.offset,
        area: this.chosenArea,
        type: this.chosenType,
        order: this.chosenOrder,
      });

      this.loading = false;
    },
    // showMvCategory() {
    //   getMvCategory(
    //     this.limit,
    //     this.offset,
    //     this.chosenArea,
    //     this.chosenType,
    //     this.chosenOrder
    //   ).then((res) => {
    //     this.mvs = this.mvs.concat(res.data);

    //     if (res.hasMore) {
    //       this.currentPage += 1;
    //       this.loading = true;
    //     } else {
    //       this.loading = false;
    //     }
    //   });
    // },
  },
};
</script>
<style lang="stylus" scoped>
.mv-wrap {
  // height: 100vh;
  margin-top: -20px;

  li {
    &:hover {
      color: $color-theme;
      transition: all 0.4s;
    }
  }

  .tag-en {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;

    li {
      width: 56px;
      height: 28px;
      margin-right: 14px;
      text-align: center;
      line-height: 29px;
      border-radius: 50%;
      font-size: 13px;
      color: #333333;
      cursor: pointer;

      &:first-child, &.last-child {
        width: 56px;
        border-radius: 14px;
      }

      &.active {
        background: $color-theme;
        font-weight: 700;
        color: #ffffff;
      }

      &:hover {
        color: $color-theme;
        transition: all 0.4s;
      }
    }
  }

  .tag-lang {
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;

    li {
      width: 56px;
      height: 28px;
      line-height: 29px;
      font-size: 13px;
      text-align: center;
      border-radius: 14px;
      cursor: pointer;
      margin-right: 6px;

      &.active {
        background: $color-theme;
        font-weight: 700;
        color: #ffffff;
      }
    }
  }

  .tag-type {
    li {
      width: auto;
      padding: 0 15px;
    }
  }

  .singer-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    margin: 30px -15px 0;
  }
}
</style>